<template>
	<div class="overflow-hidden">
		<n-card title="" :bordered="false" class="h-full rounded-8px shadow-sm">
			<div class="flex-col h-full">
				<n-space class="pb-12px" justify="space-between">
					<n-space>
            <n-input v-model:value="keywords" type="text" placeholder="请输入手机号/用户名" clearable/>
						<n-button type="primary" @click="handleSearchldTable"> 查询 </n-button>
						<n-button type="primary" @click="handleAddTable">
							<icon-ic-round-plus class="mr-4px text-20px" />
							新增
						</n-button>
					</n-space>
					<n-space align="center" :size="18">
						<n-button size="small" type="primary"
							@click="getTableData()">
							<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
							刷新表格
						</n-button>
						<column-setting v-model:columns="columns" />
					</n-space>
				</n-space>
				<n-data-table remote :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" flex-height
					class="flex-1-hidden" />
				<table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData"
					@refresh="getTableData()" />
			</div>
		</n-card>
	</div>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue';
import type { Ref } from 'vue';
import { NButton, NPopconfirm, NSpace, NTag } from 'naive-ui';
import type { DataTableColumns, PaginationProps } from 'naive-ui';
import { getOperatorList, updateOperator, updateOperatorById } from '@/service';
import { useBoolean, useLoading } from '@/hooks';
import TableActionModal from './components/table-action-modal.vue';
import ColumnSetting from './components/column-setting.vue';

const { loading, startLoading, endLoading } = useLoading(false);
const { bool: visible, setTrue: openModal } = useBoolean();

const columns: Ref<DataTableColumns<any>> = ref([
  {
    key: 'id',
    title: 'ID',
    align: 'center'
  },
	{
    key: 'username',
    title: '用户名称',
    align: 'center'
  },
  {
    key: 'role_name',
    title: '角色(权限)',
    align: 'center'
  },
	{
    key: 'mobile',
    title: '手机号',
    align: 'center'
  },
	{
    key: 'account',
    title: '账户余额',
    align: 'center'
  },
	{
    key: 'before_income',
    title: '分成前收益',
    align: 'center'
  },
	{
    key: 'total_income',
    title: '总收益',
    align: 'center'
  },
  {
    key: 'business_license_pic',
    title: '营业执照',
    align: 'center',
    render: (row: any) => {
      return (
				<n-image
					width="50"
					lazy
					src={row.business_license_pic}
				/>
      );
    }
  },
	{
    key: 'id_card_front_pic',
    title: '身份证正面',
    align: 'center',
    render: (row: any) => {
      return (
				<n-image
					width="50"
					lazy
					src={row.id_card_front_pic}
				/>
      );
    }
  },
	{
    key: 'id_card_back_pic',
    title: '身份证反面',
    align: 'center',
    render: (row: any) => {
      return (
				<n-image
					width="50"
					lazy
					src={row.id_card_back_pic}
				/>
      );
    }
  },
	{
    key: 'actions',
    title: '是否冻结账号',
    align: 'center',
    render: (row: any) => {
      return (
				<n-switch v-model:value={row.is_frozen} checked-value={1} unchecked-value={0} onUpdateValue={() => handleChange(row)}>
          {{
            unchecked: () => <div>正常</div>,
            checked: () => <div>冻结</div>
          }}
        </n-switch>
      );
    }
  },
  {
    key: 'actions',
    title: '操作',
    align: 'center',
    render: (row: any) => {
      return (
        <NSpace justify={'center'}>
          <NButton size={'small'} onClick={() => handleEditTable(row.id)}>
            编辑
          </NButton>
          <NPopconfirm onPositiveClick={() => handleDeleteTable(row.id)}>
            {{
              default: () => '确认删除',
              trigger: () => <NButton size={'small'}>删除</NButton>
            }}
          </NPopconfirm>
        </NSpace>
      );
    }
  }
]) as Ref<any>;

const modalType = ref<any>('add');

function setModalType(type: any) {
  modalType.value = type;
}

const editData = ref<any>(null);

async function setEditData(rowId: string) {
  const res: any = await updateOperatorById(rowId);
  if (res.code === 0) {
    editData.value = res.data;
  }
}
let keywords = ref('')
// 查询
function handleSearchldTable() {
  pagination.page = 1
  getTableData()
}
// 添加
function handleAddTable() {
  openModal();
  setModalType('add');
}
// 修改
async function handleEditTable(rowId: string) {
  await setEditData(rowId);
  setModalType('edit');
  openModal();
}
// 是否冻结
async function handleChange(row:any) {
	// console.log(row.is_frozen);
	const params = {
    id: row.id,
    is_frozen: row.is_frozen
  };
  const res: any = await updateOperator(params);
  if (res.code === 0) {
    window.$message?.success('操作成功!');
    getTableData();
  }

}

// 删除
async function handleDeleteTable(rowId: string) {
  const params = {
    id: rowId,
    is_delete: 1
  };
  const res: any = await updateOperator(params);
  if (res.code === 0) {
    window.$message?.success('删除成功!');
    getTableData();
  }
}

// 分页
const pagination: PaginationProps = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 15, 20, 25, 30],
  onChange: (page: number) => {
    pagination.page = page;
    getTableData();
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
    getTableData();
  }
});

const tableData = ref<any>([]);
async function getTableData() {
  startLoading();
	let params = {
		page: pagination.page,
		page_size: pagination.pageSize,
    keywords: keywords.value
	}
  const { data } = await getOperatorList(params);
  if (data) {
    tableData.value = data.item;
    pagination.itemCount = data.total;
    endLoading();
  }
}

function init() {
  getTableData();
}

// 初始化
init();
</script>

<style scoped></style>
